<template>
  <div id="app">
    <div id="lunbo" class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="bg_img1"></div>
        </div>
        <div class="swiper-slide">
          <yellow></yellow>
        </div>
        <div class="swiper-slide">
          <three></three>
        </div>
        <div class="swiper-slide">
          <ex></ex>
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>
    <foot3></foot3>
  </div>
</template>
<script>
import css from "swiper/dist/css/swiper.css";
import ex from "./index_parent/ex";
import yellow from "./index_parent/yellow";
import three from "./index_parent/three";
import Swiper from "swiper/dist/js/swiper.js";
import foot3 from "../components/foot3";

export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      xwzx: [],
      huodonggonggao: [],
      guanwugongkai: [],
      w: {
        width: 0,
      },
    };
  },
  components: {
    ex: ex,
    three: three,
    foot3: foot3,
    yellow: yellow,
  },

  mounted() {
    new Swiper(".swiper-container", {
      loop: false,
      // 如果需要分页器
      mousewheel: {
        mousewheelControlForceToAxis: true,
        direction: "vertical",
        mousewheelControl: true,
      },

      pagination: {
        el: ".swiper-pagination",
        //    type:'bullets'
        clickable: true,
      },
      direction: "vertical",

      // 如果需要前进后退按钮
      nextButton: ".swiper-button-next",
      prevButton: ".swiper-button-prev",
      // 如果需要滚动条
      scrollbar: ".swiper-scrollbar",
    });
  },

  methods: {
    zixun() {
      this.$api
        .post("http://47.99.59.109/zhoushan/live/user/info")
        .then((res) => {
          if (res.data.code == "UnLogin") {
            this.$message("请先登录");
            this.isShow();
          } else if (res.data.data.idttNo == "") {
            this.$message("请先完成个人认证");
            this.$router.push("/vip").catch((err) => {
              err;
            });
          } else {
            this.$router.push("/zixunjianyi").catch((err) => {
              err;
            });
          }
        });
    },
    zhengji() {
      this.$api
        .post("http://47.99.59.109/zhoushan/live/user/info")
        .then((res) => {
          if (res.data.data.idttNo == "") {
            this.$message("请先完成个人认证");
            this.$router.push("/vip").catch((err) => {
              err;
            });
          } else {
            this.$router.push("/").catch((err) => {
              err;
            });
          }
        });
    },
    enter() {
      this.w.width = "150px";
    },
    out() {
      this.w.width = "0px";
    },
  },
};
</script>
<style scoped>
a {
  text-decoration: none;
}
#adbox {
  width: 150px;
  height: 150px;
  position: absolute;
  z-index: 9999;
}
#adbox img {
  border: none;
}
#adbox b {
  position: absolute;
  right: 5px;
  top: 0;
  cursor: pointer;
  color: #666;
}
#app {
}
.small_nav {
  position: absolute;
  top: 50%;
  margin-top: -162px;

  height: 325px;

  right: 10px;
  z-index: 999;
}
li {
  list-style: none;
}

/* ======================= */

ul,
p,
li {
  padding: 0px;
  margin: 0px;
}
</style>
<style>
.swiper-container {
  /* width: 500px; */
  height: calc(100vh - 150px);

  /* background: pink; */
}
.swiper-pagination-bullet {
  width: 8px;
  height: 72px;
  display: inline-block;
  border-radius: 100%;
  background: #000;
  opacity: 0.2;
}
.swiper-slide {
  overflow: hidden;
}
.bg_img1 {
  background-image: url("../assets/image/bjsy.png");
  width: 96%;
  margin: auto;
  height: 100%;
  background-size: cover;
  position: relative;
}

.swiper-container-vertical > .swiper-pagination-bullets {
  left: 90px;
  top: 50%;
  transform: translate3d(0px, -50%, 0);
}
.swiper-container .swiper-pagination-bullet {
  width: 8px;
  height: 72px !important;
  display: inline-block;
  border-radius: 1%;
  background: white;
  opacity: 0.2;
}
.swiper-pagination-bullet-active {
  background: rgb(124, 145, 155) !important;
}
.swiper-container-vertical > .swiper-pagination-bullets {
  width: 5%;
}
</style>
